<template>
	<view class="page_index">

		<!-- <u-skeleton :loading="loading" :animate="true" class="skeleton-in">
	  </u-skeleton> -->
		<!-- <u-skeleton :loading="loading" height="100%"></u-skeleton> -->
		<view class="hd_jn" @click="jnshowfun">
			<image src="/static/images/hd_jn.png"></image>
			<view class="hd_jn-text">
				活动规则
			</view>
		</view>
		<view class="bc_img">

			<view style="width: 750rpx;height: 1556rpx;position: relative;" v-if="imgshow">
				<image class="bc_img_in" :src="imgurl+inpayimg" style="width: 750rpx;height: 1556rpx;" lazy-load
					@load="imgonload"></image>
				<!-- <view class="icon_qp">
	  		<image :src="imgurl+codeimg" ></image>
	  	</view> -->

			</view>
			<view class="bt-in-k">
				<view class="bt-in" @click="inhome">
					进入活动
				</view>
			</view>

			<!-- <view class="select-in">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle"></u-checkbox>
				</u-checkbox-group>
				<view class="user-qx">
					我已阅读并同意<text @click="usertest">《用户协议》</text>
				</view>
			</view> -->


		</view>




		<u-popup v-model="failshow" mode="center" border-radius="35" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					温馨提示
				</view>
				<view class="fail-content">
					您已参与过活动，且积分已发放
				</view>
				<view class="fail-bt">
					查看积分
				</view>
			</view>
		</u-popup>
		<u-popup v-model="noinshow" mode="center" border-radius="35" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					对不起暂无活动资格
				</view>
				<view class="fail-content">
					请联系客服咨询
				</view>
				<view class="fail-bt" @click="gohome">
					首页
				</view>
			</view>
		</u-popup>
		<u-popup v-model="norsshow" mode="center" border-radius="35" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					温馨提示
				</view>
				<view class="fail-content">
					活动人数已满
				</view>
				<view class="fail-bt" @click="gohome">
					首页
				</view>
			</view>
		</u-popup>
		<u-popup v-model="jnshow" mode="center" border-radius="35" :closeable="true" :overlay="true">
			<view class="fail-k jnshow-k">
				<view class="fail-title jnshow-title">
					活动介绍
				</view>
				<view class="fail-content jnshow-content" v-html="shuoming">
					<!-- {{}} -->
				</view>

			</view>
		</u-popup>


		<u-popup v-model="payshow" mode="center" border-radius="10" :mask-close-able="false" :closeable="false"
			:overlay="true">
			<view class="fail-k payshow-k">
				<view class="fail-title jnshow-title">
					活动介绍
				</view>
				<view class="fail-content jnshow-content" v-html="shuoming">
					<!-- {{}} -->
				</view>
				<view class="payshow-bt">
					<button @click="()=>{payshow=false}">我已知晓以上活动内容</button>
				</view>
			</view>
		</u-popup>

		<!-- 首页展示 -->
		<!-- :style="{marginTop:statusBarHeight,paddingTop:'90rpx'}" -->
		<view class="page_content" v-if="navIndex == 0">

		</view>


		<view class="po-k" v-if="loading">
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>



	</view>
</template>

<script>
	import AuthorizationPopup from "@/components/AuthorizationPopup/index";
	import {
		mapGetters
	} from "vuex";
	import {
		BASE_URL_IMAHE
	} from "../../../utils/https";
	import {
		getActivityDetails,
		beginActivity
	} from "@/api/index/index";

	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? uni.getSystemInfoSync().statusBarHeight + "px" :
		"30rpx";


	let app = getApp();
	export default {
		name: "gochees.vue",
		// computed: mapGetters(["isLogin"]),
		components: {
			AuthorizationPopup,
		},

		onLoad(options) {
			// console.log(getCurrentPages().length)
			if (!options.activityId) {
				// 跳转回原页面
				if (getCurrentPages().length == 1) {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}


			} else {
				this.form.activityId = options.activityId
				this.form.userRef = uni.getStorageSync("userRef")
				this.getlist()
			}



		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage(e) {
			return {
				title: "一个兴趣社交购物平台",
				imageUrl: BASE_URL_IMAHE +
					"file/test/productImage/20230710/285ce91ce9774534b5c57947ca7c96c9.jpg",
				path: `/pages/index/index?parentInviteCode=${
        uni.getStorageSync("phoneNumber") || ""
      }`,
			};
		},
		onShow() {

			let self = this;
			this.listPage();
			// if (uni.getStorageSync("token")) {
			//   this.$refs.authRef.cancel();
			// }
			// setTimeout(() => {
			//   if (!uni.getStorageSync("token") && !uni.getStorageSync("modal")) {
			//     //第一次进入弹窗
			//     this.$refs.authRef.showToggle();
			//     uni.setStorageSync("modal", true);
			//   }
			// }, 1000);


			// this.getShopPingApi();

		},
		data() {
			return {
				loading: true,
				imgurl: BASE_URL_IMAHE,
				status: 'loading',
				iconType: 'circle',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '正在加载进入活动...',
					nomore: '实在没有了'
				},
				skeleton: [
					"line-sm*3",
					40,
					"card",
					"circlesm*2",
					"line",
					"card-lg",
					40,
					"news",
					"line-sm*3+square",
				],
				navIndex: 0,
				checked: false,
				failshow: false,
				noinshow: false,
				jnshow: false,
				norsshow: false,
				form: {
					userRef: "",
					activityId: "",
				},
				shuoming: "",
				activityDet: {},
				resbeginActivity: {},
				inpayimg: "",
				codeimg: "",
				imgshow: false,

				payshow: true,

			};

		},
		//上拉
		onReachBottom() {
			console.log("触发上拉加载");
			// this.getShopPingApi();
		},
		methods: {
			async getlist() {
				// uni.showLoading({
				// 	title:"加载中",
				// })
				this.inpayimg = null
				const resbeginActivity = await beginActivity(JSON.stringify(this.form))
				this.resbeginActivity = resbeginActivity
				uni.setStorageSync('jumpShopLink', resbeginActivity.activity && resbeginActivity.activity
					.jumpShopLink ? resbeginActivity.activity.jumpShopLink : '')


				const res = await getActivityDetails(JSON.stringify(this.form))

				this.codeimg = res.activity.coverImg
				this.shuoming = res.activity.rule
				this.inpayimg = res.activity.posterBackdropImg
				app.globalData.data.inpayimg = this.inpayimg
				this.imgshow = true

				if (resbeginActivity.result == -100) {
					// -100 不在活动白名单
					this.noinshow = true

				} else if (resbeginActivity.result == -101) {
					// -101 已参与活动
					this.failshow = true

				} else if (resbeginActivity.result == -102) {
					// -101 已参与活动
					this.norsshow = true

				} else if (resbeginActivity.result == 0) {

				} else {
					uni.showToast({
						title: resbeginActivity.message,
						icon: "error",
					})
					setTimeout(() => {
						if (getCurrentPages().length == 1) {
							uni.reLaunch({
								url: "/pages/home/index"
							})
						} else {
							uni.navigateBack({
								delta: 1,
							});
						}
					}, 1500)

				}

			},
			jnshowfun() {
				this.jnshow = true
			},
			failclose() {
				if (getCurrentPages().length == 1) {
					uni.reLaunch({
						url: "/pages/home/index"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}
			},
			failopen() {

			},
			gohome() {
				uni.reLaunch({
					url: "/pages/home/index"
				})
			},
			imgonload() {



				this.loading = false
				uni.hideLoading();
			},
			async inhome() {
				// if (!this.checked) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: "请阅读并勾选用户协议"
				// 	})
				// 	return
				// }
				if (this.resbeginActivity.result == -100) {
					// -100 不在活动白名单
					this.noinshow = true

				} else if (this.resbeginActivity.result == -101) {
					// -101 已参与活动
					this.failshow = true

				} else if (this.resbeginActivity.result == 0) {
					uni.navigateTo({
						url: `/pages/chees/index?activityId=${this.resbeginActivity.activity.id}&whiteListId=${this.resbeginActivity.activity.whiteListId}&joinRecordId=${this.resbeginActivity.activity.joinRecordId}`
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: "error",
					})
					setTimeout(() => {
						if (getCurrentPages().length == 1) {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						} else {
							uni.navigateBack({
								delta: 1,
							});
						}
					}, 1500)

				}

			},
			async listPage() {


				// setTimeout(()=>{

				// },5000)

				// Promise.all([ this.getShopPingApi()]).finally(
				//   () => (this.loading = false)
				// );

			},


		}
	};
</script>

<style scoped lang="scss">
	.page_index {
		width: 750rpx;
		background-color: #F5F5F5 !important;
		min-height: 100vh;
		// padding-bottom: rpx(16);
		padding-bottom: constant(safe-area-inset-top); // 顶部安全区
		padding-bottom: env(safe-area-inset-top); // 顶部安全区
		padding-bottom: constant(safe-area-inset-bottom); // 底部安全区
		padding-bottom: env(safe-area-inset-bottom); // 底部安全区
		box-sizing: content-box;
		margin: 0 auto;
	}

	.skeleton-in {
		width: 750rpx;
		height: 100%;
	}

	.hd_jn {
		position: absolute;
		top: 49rpx;
		right: 36rpx;
		z-index: 10;
		font-size: 20rpx;
		text-align: center;
		color: #39393d;

		image {
			width: 90rpx;
			height: 92rpx;
			margin-bottom: 10rpx;
		}
	}

	.bc_img {
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: relative;

		.bc_img_in {}

		.icon_qp {
			position: absolute;
			bottom: 733rpx;
			text-align: center;
			width: 100%;

			image {
				width: 440rpx;
				height: 440rpx;
			}
		}

		.bt-in-k {
			width: 100%;
			position: absolute;
			bottom: 395rpx;
			left: 0rpx;
		}

		.bt-in {

			width: 650rpx;
			margin: 0 auto;
			text-align: center;
			background-color: #f1c16e;
			height: 110rpx;
			box-sizing: border-box;
			border: 1rpx solid #f1c16e;
			border-radius: 25rpx;
			color: #ffffff;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 110rpx;
		}

		.select-in {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			width: 100%;
			bottom: 148rpx;
			color: black;

			.user-qx {
				margin-left: -20rpx;
			}
		}
	}

	.bc_img-gjp {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	// 弹框
	.fail-k {
		width: 490rpx;
		height: 405rpx;
		text-align: center;

		.fail-title {
			padding-top: 120rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.fail-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
		}

		.fail-bt {
			margin: 55rpx auto 0rpx;
			width: 328rpx;
			height: 64rpx;
			background-color: #292c34;
			color: #ffffff;
			border-radius: 35rpx;
			line-height: 64rpx;

		}

	}

	.jnshow-k {
		width: 650rpx;
		height: auto;
		padding-bottom: 40rpx;

		.jnshow-title {
			padding-top: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.jnshow-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
			padding: 0 20rpx;
			white-space: pre-wrap;
			text-align: left;
		}
	}

	.po-k {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.payshow-k {
		width: 720rpx;
		height: auto;
		max-height: 90vh;
		// padding-bottom: 100rpx;
		position: relative;


		.jnshow-title {
			padding-top: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.jnshow-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
			padding: 0 20rpx;
			white-space: pre-wrap;
			text-align: left;
			padding-bottom: 200rpx;
		}

		.payshow-bt {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 50rpx;
			font-size: 20rpx;

			button {
				background-color: #f1c16e;
				padding: 20rpx 40rpx;
				color: #ffffff;
			}
		}
	}
</style>